import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import SwipeableViews from 'react-swipeable-views';
import Pagination from '../components/Pagination';
import '../css/app.css'
import '../css/fas.css'
import ad from '../img/ad.webp'
import banner from '../img/1.webp'
import xinren from '../img/xinren.webp'
import xl from '../img/xl.webp'
class App extends Component {
        constructor(){
            super()
            this.state = {
                index: 0,
              };
        }
      handleChangeIndex = index => {
         
        this.setState({
          index,
        });
      };
    render() {
        const { index } = this.state;
        console.log(index)
        return (
            <React.Fragment>
                <div className='header'>
                    <span className='leftbox'>
                        <i className='fa fa-location-arrow'></i><span><span className='pdf'>请选择位置</span><i style={{width:'0.1rem'}} className='fa fa-caret-down'></i></span>
                    </span>
                </div>
                <div className='search'>
                    <div className='box'>
                          <i className='fa fa-search'></i><span className='txt'>搜索商家、名称</span>  
                    </div>
                </div>
                <div className='adbox'>
                    <img src={ad} />
                </div>

                <div  style={styles.root}>
                    <SwipeableViews enableMouseEvents index={this.state.index} onChangeIndex={this.handleChangeIndex}>
                        <div className='swipbox'>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                            <a href=''>
                                <div className='imgbox'>
                                    <img src={banner} alt='loading' />
                                </div>
                                <span>这个是描述</span>
                            </a>
                        </div>
                        <div className='swipbox'>
                            22222
                    </div>
                    </SwipeableViews>
                    <Pagination dots={3} index={this.state.index} onChangeIndex={this.handleChangeIndex} />
                </div>
                <div className='xinren'>
                    <img src={xinren} />
                </div>
                <div className='xianliang'>
                    <div >
                    <img src={xl} />
                    </div>
                    <div >
                    <img src={xl} />
                    </div>
                </div>

                <div className='tuijian'> 
                    推荐商家
                </div>
                <div style={{height:'5000px'}}>

                </div>
                </React.Fragment>
            
        );
    }
 } 
 const styles = {
    root: {
      position: 'relative',
    },
    slide: {
      padding: 15,
      minHeight: 100,
      color: '#fff',
    },
    slide1: {
      backgroundColor: '#FEA900',
    },
    slide2: {
      backgroundColor: '#B3DC4A',
    },
    slide3: {
      backgroundColor: '#6AC0FF',
    },
  };
const mapStateToProps = (state) => ({
    errorMessage: state.errorMessage
    
  })
export default withRouter(connect(mapStateToProps)(App))
 